<template>
  <div>
    <img class="logo-svg" src="@/assets/dark.svg" />
    <h1>终端2025新程序练习</h1>
    <div style="padding: 12px">
      <el-button
        type="primary"
        size="large"
        class="intro-btn"
        @click="goProcedure"
        >程序走向练习</el-button
      >
    </div>
    <div style="padding: 12px">
      <el-button
        type="primary"
        size="large"
        class="intro-btn"
        @click="goTransfer"
        >移交规定练习</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const goProcedure = () => {
  // console.log("router", router);
  router.push("/Procedure");
};

const goTransfer = () => {
  // console.log("route", route);
  router.push("/Transfer");
};
</script>

<style scoped>
.logo-svg {
  min-width: 120px;
  max-width: 360px;
  width: calc(min(40vh, 40vw) - 100px);
  margin-bottom: 40px;
}

.intro-btn {
  width: calc(100% - 36px);
  max-width: 240px;
}
</style>
